<template>
  <div class="k-org-box">
    <div class="k-title">
      <img class="k-title-bg" :src="tbg" alt="" srcset="" />
      <div class="k-title-text">组织架构</div>
    </div>

    <div class="k-org-item">
      <!-- <NDropdown
        :options="optionsList"
        placement="bottom-start"
        v-memo="[optionsList]"
        trigger="click"
        @select="chooseArea"
        key-field="code"
        label-field="name"
        @clickoutside="asdas"
        @updateShow="asdas"
      >
        
      </NDropdown> -->
      <span class="k-btn1">
        <span @click="clickCascader">{{ currectData.name }}</span>
        <NIcon
          @click="clickCascader"
          :style="{
            transform: `rotateZ(${clickCascaderIs ? 0 : -90}deg)`,
            transition: '0.1s',
          }"
          ><ChevronDown></ChevronDown
        ></NIcon>
        <ElCascaderPanel
          v-show="clickCascaderIs"
          class="k-el-cascader-panel"
          :props="props"
          @change="updateCascader"
        ></ElCascaderPanel>
        <div
          class="ktn-btn-close"
          @mousedown="clickCascaderIs = !clickCascaderIs"
          v-if="clickCascaderIs"
        ></div>
      </span>
      <!-- <ElCascader :props="props"></ElCascader> -->
      <div class="k-carousel-box">
        <div class="custom-arrow">
          <n-icon class="btn-1-left" @click="moveLeft"
            ><CaretBackOutline
          /></n-icon>
          <n-icon class="btn-1-right" @click="moveRight"
            ><CaretForward
          /></n-icon>
        </div>
        <div class="k-carousel-item-box">
          <div
            class="k-carousel-item"
            :style="{
              transform: 'translateX(' + offsetX + 'px)',
              flexDirection: PageData.leaders.length <= 2 ? `row` : 'column',
            }"
            ref="kSADGASHD"
          >
            <div
              v-for="(items, index) in PageDataeaders_"
              :key="index"
              style="
                display: flex;
                width: auto;
                flex-flow: row;
                flex-direction: column;
                flex-wrap: wrap;
              "
            >
              <div
                class="k-crad"
                @click="chooseUser(index)"
                :class="{ 'active-k-crad': chooseIndex === index }"
                style=""
              >
                <div class="k-crad-1" ref="parentDiv">
                  <div style="white-space: nowrap">
                    {{ items.position }}
                  </div>
                </div>
                <div class="k-crad-2" ref="parentDiv1">
                  <div style="white-space: nowrap">
                    {{ items.userName }}
                  </div>
                </div>
                <img :src="bg01" alt="" srcset="" class="k-crad-3" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from "vue";
import tbg from "../../assets/images/tbg.svg";
import bg01 from "../../assets/images/bg01.svg";
import { NIcon, NEllipsis, NScrollbar, NDropdown } from "naive-ui";
import {
  handleSelect,
  optionsList,
  currectData,
  PageData,
  bus,
  insertDataIntoTree,
} from "../../composables/useMapView";
import { ChevronDown, CaretForward, CaretBackOutline } from "@vicons/ionicons5";
import { ElCascader, ElCascaderPanel, type CascaderProps } from "element-plus";
const asdas = (s) => {
  console.log("🚀 ~ asdas ~ s:", s);
};
let level_code = 0;
const props: CascaderProps = {
  lazy: true,
  checkStrictly: true,
  async lazyLoad(node, resolve) {
    const { level, value } = node;

    const result = await insertDataIntoTree(value?.code || 0);
    const level_ = result.length === 0 ? level - 1 : level;
    console.log("🚀 ~ lazyLoad ~ result:", result, level);
    const nodes = result.map((item) => ({
      value: item,
      label: item.name,
      leaf: level_ > 5,
    }));
    // Invoke `resolve` callback to return the child nodes data and indicate the loading is finished.
    resolve(nodes);
  },
};
const clickCascaderIs = ref(false);
const clickCascader = () => {
  clickCascaderIs.value = !clickCascaderIs.value;
};
const updateCascader = (data: any[]) => {
  // console.error("🚀 ~ updateCascader ~ data:", data);
  const data_ = data[data.length - 1];
  chooseArea(data_.code, data_);
  clickCascaderIs.value = false;
};
const chooseIndex = ref(0);
// 点击选择林长
const chooseUser = (index) => (chooseIndex.value = index);

const chooseArea = (key: any, ki: any) => {
  console.log(key, ki);

  chooseIndex.value = 0;
  handleSelect(key, ki);
};

const offsetX = ref(0);
const itemWidth = ref(328);
const boxWidth = ref(320);
const kSADGASHD = ref();

const parentDiv = ref();
const parentDiv1 = ref();

onMounted(() => {
  if (parentDiv.value) {
    parentDiv.value.forEach((item) => {
      item.addEventListener("wheel", (event) => {
        // 将垂直滚动转换为横向滚动
        // this.scrollLeft += event.deltaY;
        item.scrollLeft += event.deltaY / 2;
        // item
        // 阻止默认的垂直滚动行为
        event.preventDefault();
      });
    });
  }
  if (parentDiv1.value) {
    parentDiv1.value.forEach((item) => {
      item.addEventListener("wheel", (event) => {
        // 将垂直滚动转换为横向滚动
        // this.scrollLeft += event.deltaY;
        item.scrollLeft += event.deltaY / 2;
        // item
        // 阻止默认的垂直滚动行为
        event.preventDefault();
      });
    });
  }
});
const PageDataeaders_ = computed(() => {
  const arr = [...PageData.value.leaders];
  if (!arr || arr.length <= 0) return [];
  if (arr.length === 4 || arr.length === 3) {
    let ti = arr[1];
    arr[1] = arr[2];
    arr[2] = ti;
  }
  if (arr.length >= 5 && arr.length <= 8) {
    let ti_ = arr[5];
    arr[5] = arr[6];
    arr[6] = ti_;
    // let ti = arr[1];
    // arr[1] = arr[2];
    // arr[2] = ti;
    let ti__ = arr[1];
    arr[1] = arr[2];
    arr[2] = ti__;
  }
  // console.log(arr);

  return arr;
});
bus.on((data) => {
  offsetX.value = 0;
  // console.log(PageDataRef.value);
});
function moveLeft() {
  const hui =
    Math.round(PageData.value.leaders.length / 4) +
    offsetX.value / itemWidth.value;
  if (PageData.value.leaders.length <= 4 || hui === 1) return;
  const maxOffset = -(
    itemWidth.value * PageData.value.leaders.length -
    boxWidth.value
  );
  if (offsetX.value > maxOffset) {
    offsetX.value -= itemWidth.value;
  }
  kSADGASHD.value.style.transform = "translateX(" + offsetX.value + "px)";
}
function moveRight() {
  if (PageData.value.leaders.length <= 4) return;
  if (offsetX.value < 0) {
    offsetX.value += itemWidth.value;
  }
  kSADGASHD.value.style.transform = "translateX(" + offsetX.value + "px)";
}
</script>

<style scoped lang="scss">
.k-org-box {
  position: relative;
  width: 380px;
  height: 28%;
  .k-title {
    position: relative;
    top: 12px;
    left: 12px;
    width: 378px;
    height: 36px;
    margin-bottom: 10px;

    .k-title-text {
      position: absolute;
      top: 6px;
      left: 11px;
      font-size: 16px;
      color: #fff;
      font-family: "HYk2gj";
      font-weight: bold;
    }
  }

  .k-org-item {
    position: relative;
    top: 12px;
    left: 12px;
    width: 378px;
    height: 232px;
    .k-btn1 {
      position: relative;
      top: 0;
      left: 0;
      width: auto;
      height: 24px;
      display: inline-flex;
      color: #fff;
      margin-left: 26px;
      gap: 10px;
      justify-content: space-around;
      align-items: center;
      &:hover {
        background-color: #989898;
        border-radius: 5px;
        cursor: pointer;
      }
      .k-el-cascader-panel {
        position: absolute;
        top: 28px;
        left: 0;
        z-index: 999;
        background-color: #fffffffc;
      }
      .ktn-btn-close {
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
      }
    }
    .k-carousel-box {
      position: relative;
      height: 160px;
      top: 18px;
      .custom-arrow {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .n-icon {
          font-size: 36px;
          color: #3a4a41;
          &:hover {
            cursor: pointer;
            color: #989898;
          }
        }

        .btn-1-left {
          position: relative;
          left: -8px;
        }
        .btn-1-right {
          position: relative;
          left: 8px;
        }
      }
      .k-carousel-item-box {
        position: relative;
        width: calc(100% - 50px);
        left: 25px;
        height: 100%;
        overflow: hidden;
        .k-carousel-item {
          position: absolute;
          width: auto;
          height: 100%;
          display: flex;
          transition: transform 0.3s ease;
          flex-wrap: wrap; /* 允许换行 */
          width: max-content; /* 自适应宽度 */
          flex-direction: column;
          .k-crad {
            position: relative;
            height: 70px;
            width: 150px;
            margin: 5px 6px;
            color: white;
            &:hover {
              cursor: pointer;
              color: #1cf258;
            }
            &.active-k-crad {
              cursor: pointer;
              color: #1cf258;
            }
            .k-crad-1 {
              position: relative;
              height: 24px;
              z-index: 2;
              // margin-left: 26px;
              width: calc(100% - 50px);
              text-align: center;
              margin-left: 26px;
              line-height: 24px;
              overflow-x: auto;
              &::-webkit-scrollbar {
                display: none; /* 隐藏滚动条 */
              }
              // overflow: hidden;
              // white-space: nowrap;
              // text-overflow: ellipsis;
            }
            .k-crad-2 {
              position: relative;
              width: 100%;
              height: 46px;
              z-index: 2;
              font-size: 20px;
              text-align: center;
              line-height: 46px;

              width: calc(100% - 50px);
              text-align: center;
              margin-left: 26px;
              overflow-x: auto;
              &::-webkit-scrollbar {
                display: none; /* 隐藏滚动条 */
              }
            }
            .k-crad-3 {
              position: absolute;
              top: 0;
              left: 0;
            }
          }
        }
      }
    }
  }
}
</style>
